/**
 * 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值
   当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定
   当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，
   并使用最新传递给 MyContext provider 的 context value 值
   useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>
   useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。
   你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context
   
   Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。
 */
import React, { createContext, useContext } from 'react';
import { Button } from 'antd-mobile';

const themes = [
  {
    backGround: '#ffffff',
    color: '#333333',
    eeeclick: function eeeclick1() {
      console.log('light');
    },
  },
  {
    backGround: '#000000',
    color: '#ffffff',
    eeeclick: function eeeclick2() {
      console.log('dark');
    },
  },
];
const ThemeContext = createContext(themes[0]);
console.log('ThemeContext===>', ThemeContext);
function Son() {
  return (
    <div>
      <GrandSon />
    </div>
  );
}
function GrandSon() {
  const theme = useContext(ThemeContext);
  console.log('GrandSon theme ==>', theme);
  return (
    <Button style={{ backgroundColor: theme.backGround, color: theme.color }} onClick={theme.eeeclick}>
      这是GrandSon组件
    </Button>
  );
}
function ContextCom() {
  return (
    <ThemeContext.Provider value={themes[1]}>
      <Son />
    </ThemeContext.Provider>
  );
}
export default ContextCom;
